$btn-prefix-cls: $css-prefix + 'btn';

.#{$btn-prefix-cls} {
    position: relative;
    display: inline-block;
    outline: none;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-repeat: repeat-x;
    background-position: -1px -1px;
    background-size: 110% 110%;
    border: 1px solid rgba(27, 31, 35, 0.2);
    line-height: 20px;
    border-radius: $border-radio-normal;
    appearance: none;
    color: $black;
    background-color: $gray;
    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
    text-align: center;

    &-default-size {
        padding: $btn-padding-default;
        font-size: $font-size-default;
    }
    &-small-size {
        padding: $btn-padding-small;
        font-size: $font-size-small;
    }
    &-large-size {
        padding: 0.75em 1.25em;
        font-size: inherit;
    }
    &-default {
        &:hover {
            background-color: $gray-hover;
            background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
            background-position: -0.5em;
            border-color: $border-hover-color;
        }
        &:active {
            background-color: #e9ecef;
            background-image: none;
            border-color: $border-hover-color;
            box-shadow: $box-shadow-inset;
        }
    }
    &-success {
        color: $white;
        background-color: $success;
        background-image: $success-linear-gradient;
        // &:focus {
        //     box-shadow: 0 0 0 0.2em rgba(52, 208, 88, 0.4);
        // }
        &:hover {
            background-color: $success-hover;
            background-image: $success-linear-gradient-hover;
            background-position: -0.5em;
            border-color: $border-hover-color;
        }
        &:active {
            background-color: $success-active;
            background-image: none;
            border-color: $border-active-color;
            box-shadow: $box-shadow-inset;
        }
    }
    &-primary {
        color: $primary;
        background-color: $white;
        background-image: none;
        &:hover {
            background-color: $primary;
            background-image: none;
            background-position: -0.5em;
            border-color: $primary;
            color: $white;
        }
        &:active {
            box-shadow: $box-shadow-inset;
        }
    }
}
